<template>
	<view>
		<view style="height: 80rpx">
			<u-navbar style='display: flex;' height="80rpx" leftText="返回" title="作业票审批" @leftClick="back"
				@rightClick="gohistory" :bgColor="bgColor">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" size="19"></u-icon>
				</view>
				<view class="u-nav-slot" slot="right">
					<text style="color: #1989fa">历史记录</text>
				</view>
			</u-navbar>
		</view>

		<view class="tabs">
			<view class="tabs-one" @click="changetab(2)">
				<view class="tabs-top" :class="num == 2 ? 'color' : ''"> 待我审批 </view>
				<view class="tabs-color" :class="num == 2 ? 'avtive' : ''"> </view>
			</view>
			<view class="tabs-one" @click="changetab(1)">
				<view class="tabs-top" :class="num == 1 ? 'color' : ''"> 我的申请 </view>
				<view class="tabs-color" :class="num == 1 ? 'avtive' : ''"> </view>
			</view>
		</view>
		<view class="cont">
			<view class="" v-if="num == 1">
				<u-empty v-if="empty" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
				<view class="box" @tap="goschedule(item.id)" v-for="(item,index) in list" :key="index" v-else>
					<view class="box-one">
						<view class="box-title">
							{{ item.name }}
						</view>
						<view class="box-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="box-two">
						<view class="box-two-left">
							<u-icon v-if="item.zt === 1 || 2 || 3 || 4" name="bell-fill" color="#3597fa"
								style='padding-right: 8px;'></u-icon>
							<u-icon v-else name="bell-fill" color="#ff0000" style='padding-right: 8px;'></u-icon>
							{{
                item.zt == 1
                  ? "待审批"
                  : item.zt == 2
                  ? "待监护"
                  : item.zt == 3
                  ? "待验收"
                  : item.zt == 4
                  ? "已完成"
                  : "未通过"
				  }}
							<view class="box-two-right">
								<!-- 2022.12.24 12.24 -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 待我审批 -->
			<view class="" v-if="num == 2">
				<u-empty v-if="empty" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
				<view class="box" @tap="goworkapproval(item.id, item)" v-for="(item,index) in list" :key="index"
					v-else>
					<view class="box-one">
						<view class="box-title">
							{{ item.name }}
						</view>
						<view class="box-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="box-two">
						<view class="box-two-left">
							<u-icon name="clock-fill" color="#3597fa" style='padding-right: 8px;'></u-icon>
							申请人:{{item.sqr}}
						</view>
						<view class="box-two-right">
							{{ item.updateTime.toString().substring(0,4)}}-{{ item.updateTime.toString().substring(4,6)}}-{{ item.updateTime.toString().substring(6,8)}}
							{{ item.updateTime.toString().substring(8,10)}}:{{ item.updateTime.toString().substring(10,12)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getData,
		getDataxq
	} from "../../../api/approval.js";
	export default {
		data() {
			return {
				bgColor: '#f8f8f8',
				num: 2,
				type: 2,
				list: [],
				obj: {},
				empty: false,
			};
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				getData(this.type).then((res) => {
					if (res.data.length > 0) {
						this.list = res.data.reverse();
						this.empty = false;
					} else {
						this.empty = true;
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			gohistory() {
				console.log(123);
				uni.navigateTo({
					url: "../history/history",
				});
			},
			changetab(index) {
				this.num = index;
				if (index == 1) {
					this.type = 1;
					this.getList();
				} else if (index == 2) {
					this.type = 2;
					this.getList();
				}
			},
			goschedule(id) {
				console.log(id);
				getDataxq(id, this.type).then((res) => {
					console.log(res, 789);
				});
				// uni.navigateTo({
				// 	url:'../schedule/schedule'
				// })
			},
			goworkapproval(id, val) {
				getDataxq(id, this.type).then((res) => {
					// console.log(res.data);
					this.obj = res.data;
					uni.navigateTo({
						url: `../workapproval/workapproval?details=${JSON.stringify(this.obj)}`,
					});
				});
			},
		},
	};
</script>

<style lang="scss">
	.avtive {
		background: #1989fa !important;
	}

	.color {
		color: #1989fa !important;
	}

	.tabs {
		height: 90rpx;
		display: flex;
		justify-content: space-around;

		.tabs-one {
			width: 311rpx;
			height: 82rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tabs-top {
				width: 112rpx;
				height: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999;
				line-height: 44rpx;
			}

			.tabs-color {
				width: 64rpx;
				height: 6rpx;
				margin-top: 15rpx;
				background: #fff;
			}
		}
	}

	.cont {
		box-sizing: border-box;
		height: calc(100vh - 210rpx);
		overflow-y: auto;
		padding: 40rpx 24rpx;
		background-color: #f6f6f6;

		.box {
			padding: 32rpx 48rpx;
			background-color: #fff;
			border-radius: 16px 16px 16px 16px;
			margin-bottom: 20rpx;

			.box-one {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #eeeeee;

				.box-title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.box-icon {}
			}

			.box-two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-radius: 8px 8px 8px 8px;
				background: #f6f6f6;

				.box-two-left {
					display: flex;
					align-items: center;

					img {
						width: 28rpx;
						height: 28rpx;
					}

					font-size: 24rpx;
					font-family: PingFang SC-Medium,
					PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.box-two-right {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
</style>
